import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { message, Checkbox } from "antd"
import { login, getCaptcha } from "util/api"

import styles from "./style.less"
import Header from "./components/Header"
import Overview from "./components/Overview"
import Electricity from "./components/Electricity"
import Battery from "./components/Battery"
import Module from "./components/Module"
import AcInput from "./components/AcInput"
import Ring from "./components/Ring"
import FreshAir from "./components/FreshAir"
import Alarm from "./components/Alarm"
import DevInfo from "./components/DevInfo"
import PhotovoltaicModule from "./components/PhotovoltaicModule"

@withRouter
@inject("ScreenStore")
@observer
@cssModules(styles)
class Screen extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  state = { scaleX: 1, scaleY: 1 }
  componentDidMount() {}

  adaptive() {
    const width = 1920
    const height = 1080
    const c_width = document.body.offsetWidth
    const c_height = document.body.offsetHeight
    this.setState({
      scaleX: c_width / width,
      scaleY: c_height / height,
    })
  }
  componentWillMount() {
    this.adaptive()
    window.onresize = () => {
      this.adaptive()
    }
    const {
      getRing,
      getLoad,
      getRectifierModule,
      getEnvironment,
      getElectricity,
      getBattery,
      getAlarm,
      getFsuInfo,
      getPueChart,
      getAlternatingCurrent,
      getEnergyConservationData,
      fsuFirstLoad,
      getChart,
    } = this.store
    const loadAll = () => {
      getFsuInfo()
      getRing()
      getEnergyConservationData()
      getLoad()
      getRectifierModule()
      getEnvironment()
      getElectricity()
      getBattery()
      getAlternatingCurrent()
      getAlarm()
    }
    const intervalFn = () => {
      this.timer = setInterval(() => {
        loadAll()
      }, 60000)
      this.timer1 = setInterval(() => {
        getPueChart()
      }, 240000)
    }
    fsuFirstLoad()
    intervalFn()

    document.addEventListener("visibilitychange", function() {
      if (document.visibilityState === "hidden") {
        clearInterval(this.timer)
        clearInterval(this.timer1)
      } else {
        intervalFn()
      }
    })
  }
  componentWillUnmount() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  }

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div
          styleName="container"
          id={"wyw_cl_screen"}
          style={{
            transform: `scale(${this.state.scaleX}, ${this.state.scaleY})`,
          }}
        >
          <Header />
          <DevInfo />
          <Overview />
          <Electricity />
          <Battery />
          <PhotovoltaicModule />
          <Module />
          <AcInput />
          <Ring />
          <FreshAir />
          <Alarm />
        </div>
        <div
          id={"custom-select-wrap"}
          style={{ width: 430 * this.state.scaleX }}
        />
      </div>
    )
  }
}

export default Screen
